<template>
  <div class="container">
    <Breadcrumb :items="['库房', '包材辅料管理']" />
    <a-card direction="vertical" :size="12" fill :title="`包材辅料管理`">
      <a-table
        :columns="columns"
        :data="yearDataList"
        size="large"
        :bordered="{ wrapper: true, cell: true }"
      >
        <!-- 品名 -->
        <template #manage_product_id="{ record }">
          <span>{{ getProductName(record.manage_product_id) }}</span>
        </template>
        <!-- 规格 -->
        <template #guige="{ record }">
          <span>{{ getGuige(record.manage_product_id) }}</span>
        </template>
        <!-- 数量 -->
        <template #num="{ record }">
          <span>{{ getNum(record.manage_product_id, record.num) }}</span>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <a-button type="text" @click="outBaocai(record)">出库</a-button>
        </template>
      </a-table>
    </a-card>
    <BaocaiOutList
      ref="baocaiOutList"
      class="m-t-10"
      :getProductName="getProductName"
      :getGuige="getGuige"
      :manageGonghuoList="manageGonghuoList"
      :manageAddressList="manageAddressList"
      :productNameList="productNameList"
      :getUnit="getUnit"
    />
    <BaocaiDialog
      ref="baocaiDialog"
      :getProductName="getProductName"
      :getGuige="getGuige"
      :getNum="getNum"
      :manageGonghuoList="manageGonghuoList"
      :manageAddressList="manageAddressList"
      :getOutListAgain="getOutListAgain"
    />
  </div>
</template>

<script lang="ts" setup>
import SaveAddressDialog from './components/saveAddressDialog.vue';
import { ref } from 'vue';
import { getAllPackage } from '@/api/storeroom';
import {
  getManageProductName,
  getManageHouse,
  getManageAddress,
} from '@/api/manage';
import BaocaiDialog from './components/baocaiDialog.vue';
import BaocaiOutList from './components/baocaiOutList.vue';

const baocaiOutList = ref(null);
const baocaiDialog = ref(null);
const yearDataList = ref([]);
const productNameList = ref([]);
const getOutListAgain = () => {
  baocaiOutList.value.getBaocaiInfo(1);
};
const getYearInfo = async () => {
  const { data, code } = await getAllPackage();
  if (code === 200) {
    yearDataList.value = data;
  }
};
const outBaocai = (record) => {
  baocaiDialog.value.openDialog(record);
};

const manageAddressList = ref([]);
const getManageAddList = async () => {
  const { data, code } = await getManageAddress();
  if (code === 200) {
    manageAddressList.value = data;
  }
};
getManageAddList();
const manageGonghuoList = ref([]);
const getManageList = async () => {
  const { data, code } = await getManageHouse();
  if (code === 200) {
    manageGonghuoList.value = data;
  }
};
getManageList();
// 获取品名列表
const getProductNameList = async () => {
  const { data, code } = await getManageProductName();
  if (code === 200) {
    productNameList.value = data;
  }
};
getProductNameList();
const getGuige = (guige_id: number) => {
  const guige = productNameList.value.find((item: any) => item.id === guige_id);
  return guige ? guige.guige + '/' + guige.unit : '未知规格';
};
const getUnit = (guige_id: number) => {
  const unit = productNameList.value.find((item: any) => item.id === guige_id);
  return unit ? unit.unit : '未知单位';
}
const getProductName = (product_name_id: number) => {
  const productName = productNameList.value.find(
    (item: any) => item.id === product_name_id
  );
  return productName ? productName.manage_product_name : '未知品名';
};
const getNum = (product_name_id: number, num) => {
  const numInfo = productNameList.value.find(
    (item: any) => item.id === product_name_id
  );
  return numInfo ? num + numInfo.unit : '未知数量';
};
getYearInfo();
const columns = ref([
  {
    title: '品名',
    slotName: 'manage_product_id',
    align: 'center',
  },
  {
    title: '规格',
    slotName: 'guige',
    align: 'center',
  },
  {
    title: '库存',
    slotName: 'num',
    align: 'center',
  },
  {
    title: '操作',
    slotName: 'action',
    align: 'center',
    width: 100,
  },
]);
</script>

<style lang="scss" scoped>
</style>